import React, { useState, useEffect, useRef } from 'react';
import imglogo from '../../static/img/logo.png';
import './index.css';
import { Link, useNavigate, } from 'react-router-dom';
import { message, Badge } from 'antd';
import axios from 'axios';
import { aUrl } from '../../static/axios_url';
export default function Search() {
    const [hot, sethot] = useState([])
    const [carCode, setcarCode] = useState(0)
    useEffect(() => {
        axios.post(aUrl + '/shopcarAdd').then(res => {
            setcarCode(res.data.code)
        })
        sethot(['苹果', '龙虾', '香蕉', '鱼'])
    }, [])
    const hotLi = hot.map((hot, i) => {
        return <span className="hotLi" onClick={searchHot(hot)} key={i}>{hot}</span>
    })
    const refInp = useRef()
    const navigate = useNavigate()
 //键盘搜索
    function search(e) {
        console.log(e.keyCode);
        if (e.keyCode===13) {
             navigate('/tosearch?' + refInp.current.value)
            console.log(1);
        }else{
            return
        }
    }
    //点击搜索
    function issearch() {
        navigate('/tosearch?' + refInp.current.value)
    }
    function goMycenter() {
        if (sessionStorage.getItem("username")) {
            navigate('/mycenter/myaccount')
        } else {
            message.warning('请先登录！！')
        }
    }
    function goShopcar() {
        if (sessionStorage.getItem("username")) {
            navigate('/shop')
        } else {
            message.warning('请先登录！！')
        }
    }
    function searchHot(text) {

        return () => {
            navigate('/tosearch?' + text)
        }
    }

    return (
        <div className="sec">
            <div className="sec-main">
                <Link to='/'><img src={imglogo} alt="" /></Link>
                <div className="sec-inp">
                    <input ref={refInp} onKeyUp={search} type="text" name="" placeholder="请输入关键字进行搜索" /><i  onClick={issearch} className="fa fa-search"></i>
                    <div className="hot">
                        <span>热门 :</span>
                        {hotLi}
                    </div>
                </div>
                <Badge >
                    <button onClick={goMycenter} className="btn"><i className="fa fa-user-circle-o"></i><span>个人中心</span></button>
                </Badge>
                {/* <Tooltip title=" 5" color={"#f08200"} defaultVisible={true} visible={true} placement={"topRight"}> */}
                <Badge count={carCode}>
                    <button onClick={goShopcar} className="btn"><i className="fa fa-shopping-cart"></i><span>购物车</span></button>
                </Badge>
                {/* </Tooltip> */}
            </div>
        </div>
    )
}
